@charset "utf-8";
@import "common/reset";
@function n($px) {
    @return $px/2;
}
$border-color: #ff9344;
.clear {
    clear: both;
}
.web {
    width: 100%;
    overflow: hidden;
    header {
        height: n(108px);
        .left {
            width: n(123px);
            height: 50%;
            border: n(2px) solid $border-color;
            border-radius: n(16px);
            text-align: center;
            margin-top: n(48px);
            margin-left: n(23px);
            a {
                vertical-align: middle;
                color: black;
            }
        }
        .right {
            select {
                -webkit-appearance: none;
                width: n(159px);
                height: n(55px);
                border: n(2px) solid #ff9344;
                background: url("../img/images/indxt/xialakuang.png") no-repeat right n(12px) top n(20px) #ffffff;
                background-size: n(30px) n(16px);
                border-radius: n(3px);
                text-indent: n(13px);
                margin-top: n(48px);
                margin-right: n(22px);
                font-size: n(26px);
            }
        }
        .center {
            overflow: hidden;
            width: 35%;
            margin: 0 auto;
            h2 {
                font-size: n(26px);
                margin-top: n(62px);
                text-align: center;
            }
        }
    }
    section {
        .search {
            margin: 0 auto;
            width: 40%;
            height: n(54px);
            border: $border-color n(2px) solid;
            border-radius: n(25px);
            margin-top: n(34px);
            line-height: n(54px);
            font-size: 0;
            position: relative;
            input {
                height: n(50px);
                line-height: n(50px);
                margin-left: n(10px);
                padding: 0 n(10px);
                font-size: n(24px);
                border: none;
                background: none;
                width: 90%;
                vertical-align: middle;
            }
            i {
                color: $border-color;
                font-size: n(34px);
                vertical-align: middle;
                position: absolute;
                right: 10px;
            }
        }
        .so{
            h3{
                font-size: n(26px);
                text-align: center;
                margin-top: n(32px);
            }
            ul{
                width: 60%;
                margin: 0 auto;
                text-align: center;
                margin-top: 2%;
                li{
                    display: inline-block;
                    width: 23%;
                    background: #dcdcdc;
                    text-align: center;
                    line-height: 6vmax;
                    margin-bottom:1% ;
                    a{
                        font-size: n(20px);
                        color: #898989;
                        vertical-align: middle;
                    }
                }
            }
        }
        .hot{
            margin-top: n(38px);
            margin-left: n(38px);
            img{
                width: 25%;
                vertical-align: middle;
            }
            span{
                font-size: n(30px);
                vertical-align: middle;
            }
        }
        .more{
            margin-top: n(50px);
            margin-right: n(21px);
            span{
                font-size: n(23px);
            }
            i{
                color: $border-color;
                font-size: n(26px);
            }
        }
        .hot_photo{
            margin-top: n(32px);
            ul{
                width: 95%;
                margin: 0 auto;
                li{
                    width: 39.4%;
                    
                    &:last-of-type{
                        width: 59.1%;
                        margin-left: 1.4%;
                        .photo_left{
                            display: inline-block;
                            width: 47%;
                        }
                        .photo_right{
                            display: inline-block;
                            width: 51.1%;
                        }
                    }
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .recommend{
            padding-bottom: 100px;
            ul{
                width: 95%;
                margin: 0 auto;
                margin-top: n(48px);
              li{
                  width: 32%;
                  display: inline-block;
                  margin-right: 2.4%;
                  &:nth-of-type(2){
                      width: 29.8%;
                  }
                  &:nth-of-type(3){
                      width: 31%;
                  }
                  img{
                      width: 100%;
                      
                  }
              }  
            }
        }
    }
}